<template>
  <a-modal :title="form.id ? '编辑' : '添加'" style="width: 950px" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-row>
        <a-col :span="12">
          <a-form-item label="分类" name="categoryId" required>
            <a-select style="width: 80%" v-model:value="form.categoryId" placeholder="分类" @change="referenceChange(form.categoryId)">
              <a-select-option v-for="item in dictValueList" :key="item" :value="item.categoryId">{{ item.categoryName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="物料" name="materialId">
            <!-- <a-input-number style="width: 80%" v-model:value="form.materialId" placeholder="物料"/> -->
            <a-select style="width: 80%" v-model:value="form.materialId" placeholder="物料" @change="material">
              <a-select-option v-for="item in wuliaoValueList" :key="item" :value="item.id">{{ item.materialName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="合同价" name="purchasePrice">
            <a-input-number style="width: 80%" v-model:value="form.purchasePrice" placeholder="合同价"/>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item label="成本价" name="purchasePrice">
            <a-input-number style="width: 80%" v-model:value="form.purchasePrice" placeholder="成本价"/>
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item label="数量" name="quantity">
            <a-input-number style="width: 80%" v-model:value="form.quantity" placeholder="数量"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick } from 'vue';
  
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { projectMaterialApi } from '/@/api/business/project-material/project-material-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  // ------------------------ 事件 -----------------------
  const emits = defineEmits(['reloadList']);
  // ------------------------ 显示与隐藏 ------------------
  // 是否显示
  const visibleFlag = ref(false);

  function show(rowData) {
  
    queryDict2();
    Object.assign(form, formDefault);
      if (rowData && !_.isEmpty(rowData)) {
          Object.assign(form, rowData);
    }
    form.materialId = Number(rowData.materialId)
    visibleFlag.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }
  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }

  // ------------------------ 表单 ------------------------

  //点击分类传参
  const wuliaoValueList = ref([]);
  async function referenceChange(id) {
    // console.log(id);
    let obj = {
      categoryId: id,
    };
    let res = await projectMaterialApi.ClassificationReference(obj);
    wuliaoValueList.value = res.data;
  }
  // 分类
  const formDefault1 = reactive({
    categoryType: 2,
    // parentId:''
  });
  const dictValueList = ref([]);
  async function queryDict2() {
    let res = await projectMaterialApi.ClassificationData(formDefault1);
    dictValueList.value = res.data;
    // console.log(res);
    if (form.categoryId) {
      await referenceChange(form.categoryId)
    }
  }
  // 组件ref
  const formRef = ref();
  const formDefault = {
    id: undefined,
    materialId: undefined, //物料id
    // projectId: undefined, //项目id
    categoryId:undefined,//分类
    projectId: undefined, //项目id
    purchasePrice: undefined, //合同价
    // costPrice: undefined, //成本价
    purchasePrice:undefined,
    quantity: undefined, //数量
  };

  let form = reactive({ ...formDefault });

  const rules = {
    materialId: [{ required: true, message: '物料 必填' }],
    // projectId: [{ required: true, message: '项目名称 必填' }],
};


  

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    console.log(route)
    try {
      form.projectId = route.query.projectId
      if (form.id) {
        await projectMaterialApi.update(form);
      } else {
        await projectMaterialApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
</script>
